<template>
  <el-dialog
  :visible.sync="visible" :lock-scroll="false"
  :width="width" id="self-dialog" @closed="$emit('closed')">
    <el-row>
      <el-col :span="6" class="dialog-logo">
        <img src="../assets/logo_login.png" alt="">
        <p>测绘行业的</p>
        <p>互联网集聚区</p>
      </el-col>
      <el-col :span="18">
        <slot></slot>
      </el-col>
    </el-row>
  </el-dialog>
</template>

<script>
  export default {
    title: '弹框模板',
    name: 'tele-modal',
    props: {
      width: {
        type: String,
        default: '640px'
      },
      dialogVisible: {
        type: Boolean,
        default: false
      }
    },
    data () {
      return {
        visible: false
      }
    },
    watch: {
      'dialogVisible' (val) {
        this.visible = val
      },
      'visible' (val) {
        if (!val) {
          this.$emit('update:dialogVisible', false)
        }
      }
    }
  }
</script>
<style>
  #self-dialog .el-dialog {
    border-radius: 10px;
  }
  .el-dialog__headerbtn {
    z-index: 3;
  }
  #self-dialog .el-dialog__body {
    padding: 0px;
  }
  #self-dialog .el-dialog__header {
    padding: 0;
  }
  #self-dialog .text {
    color: #497D03;
  }
  #self-dialog .dialog-input {
    padding: 8px 0px;
  }
  #self-dialog input {
    border-radius: 21px;
    color: #FFFFFF;
    background-color: #BFBFBF;
  }
  #self-dialog input:focus {
    background-color: #696768;
  }
  #self-dialog .el-input__icon {
    color: #FFFFFF;
  }
  #self-dialog ::-webkit-input-placeholder {
    color: #FFFFFF;
  }
  #self-dialog :-moz-placeholder {
    /* FF 4-18 */
    color: #FFFFFF;
  }
  #self-dialog ::-moz-placeholder {
    /* FF 19+ */
    color: #FFFFFF;
  }
  #self-dialog :-ms-input-placeholder {
    /* IE 10+ */
    color: #FFFFFF;
  }
  .diaglo-btn {
    margin: 8px 0px;
  }
  #self-dialog .dialog-logo {
    background: #91BC64;
    height: 472px;
    border-radius: 10px 0 0 10px;
    background-image: url('../assets/modalbg.png');
    padding: 30px;
    padding-top: 100px;
    color: #FFFFFF;
    font-size: 16px;
    font-weight: bold;
  }
  #self-dialog .dialog-logo * {
    text-align: justify;
    text-align-last: justify;
  }
  #self-dialog .dialog-logo h1 {
    margin: 100px 0 17px 0;
  }
  #self-dialog .dialog-logo p {
    margin: 0;
  }
  #self-dialog .dialog-content {
    padding: 0 50px 40px 50px;
    text-align: center;
  }
  #self-dialog .is-plain {
    font-size: 14px;
  }
</style>
